<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像数据调试工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-button {
            background: #409eff;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px 5px;
        }
        .test-button:hover {
            background: #66b1ff;
        }
        .result-box {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 15px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
        }
        .image-preview {
            margin: 15px 0;
            text-align: center;
        }
        .image-preview img {
            max-width: 100%;
            max-height: 300px;
            border: 2px solid #ddd;
            border-radius: 8px;
        }
        .status {
            padding: 10px;
            border-radius: 6px;
            margin: 10px 0;
        }
        .status.success { background: #d4edda; color: #155724; }
        .status.error { background: #f8d7da; color: #721c24; }
        .status.info { background: #d1ecf1; color: #0c5460; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔍 图像生成数据调试工具</h1>
        <p>用于调试图像生成API返回的数据结构和图像显示问题</p>

        <div class="controls">
            <button class="test-button" onclick="testProxyServer()">测试代理服务器</button>
            <button class="test-button" onclick="testImageGeneration()">测试图像生成</button>
            <button class="test-button" onclick="clearResults()">清除结果</button>
        </div>

        <div id="status" class="status info">
            准备就绪，点击按钮开始测试
        </div>

        <div id="results"></div>
    </div>

    <script>
        function updateStatus(message, type = 'info') {
            const statusEl = document.getElementById('status');
            statusEl.textContent = message;
            statusEl.className = `status ${type}`;
        }

        function addResult(title, content, type = 'info') {
            const resultsEl = document.getElementById('results');
            const resultDiv = document.createElement('div');
            resultDiv.innerHTML = `
                <h3>${title}</h3>
                <div class="result-box">${content}</div>
            `;
            resultsEl.appendChild(resultDiv);
        }

        async function testProxyServer() {
            updateStatus('正在测试代理服务器...', 'info');
            
            try {
                const response = await fetch('http://localhost:3001/api/status');
                const data = await response.json();
                
                addResult('代理服务器状态', JSON.stringify(data, null, 2));
                updateStatus('代理服务器测试成功', 'success');
            } catch (error) {
                addResult('代理服务器错误', error.message);
                updateStatus('代理服务器测试失败: ' + error.message, 'error');
            }
        }

        async function testImageGeneration() {
            updateStatus('正在测试图像生成...', 'info');
            
            const testData = {
                model: 'doubao-seededit-3-0-i2i-250628',
                prompt: '改成爱心形状的泡泡',
                image: 'https://ark-project.tos-cn-beijing.volces.com/doc_image/seededit_i2i.jpeg',
                response_format: 'url',
                size: 'adaptive',
                seed: 21,
                guidance_scale: 5.5,
                watermark: true
            };

            addResult('请求参数', JSON.stringify(testData, null, 2));

            try {
                const startTime = Date.now();
                
                const response = await fetch('http://localhost:3001/api/generate-image', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(testData)
                });

                const endTime = Date.now();
                const duration = ((endTime - startTime) / 1000).toFixed(2);

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }

                const result = await response.json();
                
                addResult(`响应数据 (耗时: ${duration}秒)`, JSON.stringify(result, null, 2));

                // 检查数据结构
                if (result.success && result.data) {
                    const apiData = result.data;
                    addResult('API数据结构分析', `
数据类型: ${typeof apiData}
是否有data数组: ${!!apiData.data}
data数组长度: ${apiData.data ? apiData.data.length : 'N/A'}
第一个图像URL: ${apiData.data?.[0]?.url || 'N/A'}
模型: ${apiData.model || 'N/A'}
创建时间: ${apiData.created || 'N/A'}
使用统计: ${apiData.usage ? JSON.stringify(apiData.usage) : 'N/A'}
                    `);

                    // 尝试显示图像
                    if (apiData.data?.[0]?.url) {
                        const imageUrl = apiData.data[0].url;
                        const imageDiv = document.createElement('div');
                        imageDiv.className = 'image-preview';
                        imageDiv.innerHTML = `
                            <h3>生成的图像</h3>
                            <img src="${imageUrl}" alt="生成的图像" onload="console.log('图像加载成功')" onerror="console.error('图像加载失败')">
                            <p>图像URL: <a href="${imageUrl}" target="_blank">${imageUrl}</a></p>
                        `;
                        document.getElementById('results').appendChild(imageDiv);
                        
                        updateStatus('图像生成成功！', 'success');
                    } else {
                        updateStatus('图像生成成功，但无法获取图像URL', 'error');
                    }
                } else {
                    updateStatus('图像生成失败: ' + (result.message || '未知错误'), 'error');
                }

            } catch (error) {
                addResult('图像生成错误', error.message);
                updateStatus('图像生成失败: ' + error.message, 'error');
            }
        }

        function clearResults() {
            document.getElementById('results').innerHTML = '';
            updateStatus('结果已清除', 'info');
        }

        // 页面加载时自动测试代理服务器
        window.onload = function() {
            setTimeout(testProxyServer, 1000);
        };
    </script>
</body>
</html>
